<template>

    <!-- 透明遮罩层 -->
    <div class="map-overlay">
      <!-- 左侧悬浮框 -->
      <div class="left-floating-box">
        <div style="display: flex; flex-direction: column; align-items: center;">
          <el-table :data="tableData" style="width: 100%" show-header="false">
            <el-table-column>
              <template slot-scope="scope">
                <p><strong>实有人口:</strong> {{ scope.row.populationCount }}</p>
                <p><strong>实有房屋:</strong> {{ scope.row.buildingCount }}</p>
                <p><strong>实有单位:</strong> {{ scope.row.buildingCount }}</p>
                <p><strong>实有车辆:</strong> {{ scope.row.carCount }}</p>
                <p><strong>实有设备:</strong> {{ scope.row.equipmentCount }}</p>
              </template>
            </el-table-column>
          </el-table>

          <div style="width: 500px; height: 600px; display: flex; justify-content: center;" ref="chart"></div>

          <div ref="chart1" style="width: 600px; height: 400px;"></div>
        </div>
      </div>

      <!-- 右侧悬浮框 -->
      <div class="right-floating-box">
        <div ref="chart2" style="width: 600px; height: 400px;"></div>

        <div ref="chart3" style="width: 600px;height:400px;"></div>
      </div>

    <div ref="gaode_Map" id="gaode_Map" style="width: 1800px; height: 1000px;"></div>
  </div>

</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

const echarts = require('echarts');
import {map} from "core-js/internals/array-iteration";
import {findAllCount, findHouseTypeCount, findPersonType, findPopulationCount} from "@/api/community/plot"; //引入AMapLoader
window._AMapSecurityConfig = {
  // 设置安全密钥
  securityJsCode: "a97ace3a685329a45d528a00b082b51d",
};
export default {
  name: 'ChartComponent',
  components: {},
  props: [],
  data() {
    return {
      chart3: null,
      chartOption: {
        // 初始的图表配置，可以留空或设置一些基本的样式
        title: {
          text: '加载中...'
        }
      },
      tableData:[],
      tableData1:[
      ],
      peosonData:[],
      loading: false,
      // visible: false,
      isDetail: false,
      dataForm: {
        kqName: undefined,
        kqLocation: undefined,
        kqLongitude: undefined,
        kqLatitude: undefined,
        kqWorkUnit: undefined,
        cronkqAccredit: [],
        kqValidCardRange: undefined,
      },
      rules: {},
      input: "",
      input1: "",
      longitude: "",
      latitude: "",
      map: null,
      auto: null,
      placeSearch: null,
      lnglat: [],
      markers: [],
      position: {},
      domicileCount:0,
      foreignCount:0,
      abroadCount:0,
      temporaryCount:0,
      barData: [],
      // lng: 0, // 初始化经度
      // lat: 0, // 初始化纬度
    };
  },
  computed: {},
  watch: {},
  created() {


  },
  mounted() {
    this.getData();
    this.initMap();
    this.getData1();
    this.initCharts();
    this.getData2();
    this.getData3();
    // this.fetchChartData();
  },
  methods: {
  //   fetchChartData() {
  //     axios.get('你的API地址')
  //       .then(response => {
  //         const data = response.data; // 假设后端返回的数据在response.data中
  //         this.initChart(data);
  //       })
  //       .catch(error => {
  //         console.error('获取图表数据失败:', error);
  //         // 可以在这里处理错误，比如显示一个错误消息
  //       });
  //   },
  //   initChart(data) {
  //     // 确保DOM元素已存在
  //     if (!this.$refs.chart3) return;
  //
  //     // 如果之前已经初始化了图表，先销毁它
  //     if (this.chart3) {
  //       this.chart3.dispose();
  //     }
  //
  //     // 初始化图表
  //     this.chart3 = echarts.init(this.$refs.chart3);
  //
  //     // 根据获取到的数据设置图表配置
  //     const option = {
  //       title: {
  //         text: '数据可视化图表'
  //       },
  //       tooltip: {},
  //       legend: {
  //         data: ['销量'] // 根据实际情况调整
  //       },
  //       xAxis: {
  //         data: data.xAxisData // 假设数据中包含xAxisData
  //       },
  //       yAxis: {},
  //       series: [{
  //         name: '销量',
  //         type: 'bar',
  //         data: data.seriesData // 假设数据中包含seriesData
  //       }]
  //     };
  //
  //     // 使用配置项和数据显示图表
  //     this.chart3.setOption(option);
  //   }
  // },
  // beforeDestroy() {
  //   // 组件销毁前销毁图表实例
  //   if (this.chart3) {
  //     this.chart3.dispose();
  //   }
  // },




  getData2() {
      // 假设findPopulationCount()方法是用来获取数据的异步请求
      findHouseTypeCount().then(res => {
        this.barData = [
          { value: res.data.selfoccupiedCount, name: '自住房' },
          { value: res.data.ldleCount, name: '闲置房' },
          { value: res.data.leaseCount, name: '租赁房' },
          { value: res.data.otherCount, name: '其它' }
        ];
        this.initBarChart();
      });
    },
    getData3() {
      // 假设findPopulationCount()方法是用来获取数据的异步请求
      findPersonType().then(res => {
        this.peosonData = [
          { value: res.data.longTermUnappear, name: '长期未出现' },
          { value: res.data.inward, name: '外来活动频繁人员' },
          { value: res.data.visit, name: '来访重点关注人员' },
          { value: res.data.longTermAppear, name: '长期住户' }
        ];
        this.initBarChart2();
      });
    },
    initBarChart() {
      let myChart = echarts.init(this.$refs.chart1);

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.barData.map(item => item.name)
        },
        series: [
          {
            type: 'bar',
            data: this.barData.map(item => item.value),
            label: {
              show: true,
              position: 'right'
            }
          }
        ]
      });
    },
    initBarChart2() {
      let myChart = echarts.init(this.$refs.chart2);

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.peosonData.map(item => item.name)
        },
        series: [
          {
            type: 'bar',
            data: this.peosonData.map(item => item.value),
            label: {
              show: true,
              position: 'right'
            }
          }
        ]
      });
    },
    initCharts() {
      let myChart = echarts.init(this.$refs.chart);

      myChart.setOption({
        title: { text: '在Vue中使用echarts（饼图）' },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.tableData1.map(item => item.name)
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.tableData1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    getData(){
      findAllCount().then(res=>{
        this.tableData=res.data
        this.total=res.data.total
        console.log(res.data);
      })
    },
    getData1() {
      findPopulationCount().then(res => {
        this.tableData1 = [
          { value: res.data.domicileCount, name: '户籍人员' },
          { value: res.data.foreignCount, name: '外来人员' },
          { value: res.data.abroadCount, name: '境外人员' },
          { value: res.data.temporaryCount, name: '临时人员' }
        ];
        console.log(this.tableData1);
        this.initCharts(); // 在数据获取成功后初始化图表
      });
    },



    initMap() {
      let centerLen = [116.397471,39.908536];
      AMapLoader.load({
        key: "085f7d1a48acc9b9611b99096b0a0589", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder", 'AMap.ToolBar',
          'AMap.Scale'],
      })
        .then((AMap) => {
          this.Amap = AMap;
          this.map = new AMap.Map("gaode_Map", {
            // 设置地图容器id
            viewMode: "3D", //  是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center: centerLen, //中心点坐标
            resizeEnable: true,
            mapStyle: 'amap://styles/blue' // 使用主题
          });
          // 创建多边形
          var polygon1 = new AMap.Polygon({
            map: this.map,
            path: [
              [121.694333,30.872673],
              [121.693609,30.868224],
              [121.696509,30.868361],
              [121.696885,30.870791],
              [121.697081,30.870771],
              [121.697378,30.872915],
              [121.69688,30.87308],

            ],
            strokeColor: "#FF33FF", // 线颜色
            strokeWeight: 6, // 线宽
            strokeOpacity: 0.2, // 线透明度
            fillColor: '#1791fc', // 填充色
            fillOpacity: 0.35, // 填充透明度
            zIndex: 50,
          });

          var polygon2 = new AMap.Polygon({
            map: this.map,
            path: [
              [121.691027,30.874247],
              [121.692773,30.874076],
              [121.692539,30.872508],
              [121.690671,30.872321],

            ],
            strokeColor: "#FF33FF", // 线颜色
            strokeWeight: 6, // 线宽
            strokeOpacity: 0.2, // 线透明度
            fillColor: '#1791fc', // 填充色
            fillOpacity: 0.35, // 填充透明度
            zIndex: 50,
          });

          var polygon3 = new AMap.Polygon({
            map: this.map,
            path: [
              [121.740201,30.876423],[121.740302,30.876521],[121.742333,30.876544],[121.742121,30.877685],[121.743624,30.878202],[121.744359,30.876266],[121.744115,30.874794],[121.740361,30.874777],[121.740212,30.874909]

            ],
            strokeColor: "#FF33FF", // 线颜色
            strokeWeight: 6, // 线宽
            strokeOpacity: 0.2, // 线透明度
            fillColor: '#1791fc', // 填充色
            fillOpacity: 0.35, // 填充透明度
            zIndex: 50,
          });

          this.map.addControl(new AMap.Scale()); // 比例尺
          this.map.addControl(new AMap.ToolBar()); // 工具条


          this.setMarker(centerLen)
          // 关键字查询
          this.searchMap();
          // 监听鼠标点击事件
          this.map.on("click", this.clickMapHandler);
          // 添加全屏按钮点击事件
          document.getElementById('fullscreenBtn').addEventListener('click', function () {
            if (this.map.getContainer().requestFullscreen) {
              this.map.getContainer().requestFullscreen();
            } else if (this.map.getContainer().mozRequestFullScreen) { /* Firefox */
              this.map.getContainer().mozRequestFullScreen();
            } else if (this.map.getContainer().webkitRequestFullscreen) { /* Chrome, Safari & Opera */
              this.map.getContainer().webkitRequestFullscreen();
            } else if (this.map.getContainer().msRequestFullscreen) { /* IE/Edge */
              this.map.getContainer().msRequestFullscreen();
            }
          }.bind(this)); // 使用bind确保this指向正确
        })


        .catch((e) => {
        });

    },

    searchMapByCoordinates() {
      let lng = parseFloat(this.longitude); // 将经度从字符串转换为数值类型
      let lat = parseFloat(this.latitude); // 将纬度从字符串转换为数值类型

      if (isNaN(lng) || isNaN(lat)) {
        alert('请输入有效的经度和纬度');
        return;
      }
      // 根据经度和纬度设置地图中心点
      let map = new AMap.Map("gaode_Map", {
        resizeEnable: true,
        center: [lng, lat],
        zoom: 13
      });

      // 在地图上添加标记点
      // let marker = new AMap.Marker({
      //   position: [lng, lat],
      //   map: map
      // });
      // 创建圆形
      let circle = new this.Amap.Circle({
        center: [lng, lat], // 设置圆心位置
        radius: 1000, // 设置半径，单位为米
        strokeColor: "#FF33FF", // 线颜色
        strokeOpacity: 0.3, // 线透明度
        strokeWeight: 3, // 线宽
        fillColor: "#1791fc", // 填充颜色
        fillOpacity: 0.2, // 填充透明度
      });

      // 将圆形添加到地图上
      circle.setMap(map);
      // 模拟社区数据，实际情况请根据您的数据源获取真实社区数据
      let communities = [
        {name: "Community A", lng: lng + 0.005, lat: lat + 0.005},
        {name: "Community B", lng: lng - 0.003, lat: lat - 0.005},
        {name: "Community C", lng: lng + 0.002, lat: lat - 0.002}
        // Add more communities as needed
      ];

      // 统计圆形区域内的社区总数
      let communityCount = communities.filter(community => {
        return this.calculateDistance(community.lng, community.lat, lng, lat) <= radius;
      }).length;

      console.log("Total community count in the circle: ", communityCount);
      alert("此区域内社区数量为：" + communityCount);
    },


// 计算两点之间的距离
    calculateDistance(lng1, lat1, lng2, lat2) {
      let radian = Math.PI / 180;
      let radius = 6378137; // 地球半径，单位为米
      let dLat = (lat2 - lat1) * radian;
      let dLng = (lng2 - lng1) * radian;
      let a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * radian) * Math.cos(lat2 * radian) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
      let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return radius * c;
    },

    // 关键字查询
    searchMap() {
      // 搜索框自动完成类
      this.auto = new AMap.AutoComplete({
        input: "tipinput", // 使用联想输入的input的id
      });
      //构造地点查询类
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      });
      // 当选中某条搜索记录时触发
      this.auto.on("select", this.selectSite);
    },
    //选中查询出的记录
    selectSite(e) {
      if (e.poi.location) {
        this.lnglat = [e.poi.location.lng, e.poi.location.lat];
        this.placeSearch.setCity(e.poi.adcode);
        this.placeSearch.search(e.poi.name); //关键字查询
        let geocoder = new AMap.Geocoder({});
        let that = this;
        geocoder.getAddress(this.lnglat, function (status, result) {
          if (status === "complete" && result.regeocode) {
            that.province = result.regeocode.addressComponent.province;
            that.city = result.regeocode.addressComponent.city;
            //自己想要赋的值，根据自己的做修改
            that.$set(that.form, "province", that.province);
            that.$set(that.form, "city", that.city);
            that.$set(that.form, "address", e.poi.name);
            that.$set(
              that.form,
              "coordinate",
              e.poi.location.lng + "," + e.poi.location.lat
            ); //纬度，经度
          } else {
          }
        });
      } else {
        this.$message.error("查询地址失败，请重新输入地址");
      }
    },
    addMarkers() {
      this.tableData.forEach((tableData, index) => {
        let marker = new AMap.Marker({
          position: [tableData.longitude, tableData.latitude],
        });
        marker.setMap(this.map);
        this.markers.push(marker);
      });
    },
    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {
      this.dataForm.kqLongitude = e.lnglat.getLng();
      this.dataForm.kqLatitude = e.lnglat.getLat();
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      alert(this.lnglat);
      this.setMarker(this.lnglat);
      // 点击地图上的位置，根据经纬度转换成详细地址
      let geocoder = new AMap.Geocoder({});
      let that = this;
      geocoder.getAddress(this.lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          that.dataForm.kqLocation = result.regeocode.formattedAddress;
        } else {
        }
      });
      this.position = {
        longitude: e.lnglat.getLng(),
        latitude: e.lnglat.getLat(),
        address: that.address,
      };
      this.input = that.address; //把查询到的地址赋值到输入框
    },
    //  添加标记
    setMarker(lnglat) {
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // setMarkers(lnglat) {
    //   // 创建新的标记对象
    //   let marker = new AMap.Marker({
    //     position: lnglat,
    //   });
    //   marker.setMap(this.map);
    //   this.markeres.push(marker); // 将新创建的标记对象推入数组
    // },
    // 删除之前后的标记点
    removeAllMarkers() {
      this.markers.forEach(marker => {
        marker.setMap(null);
      });
      this.markers = [];
    }

  },
};
</script>


<style lang="scss">
.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.left-floating-box {
  position: absolute;
  top: 50%;
  left: 200px;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  width: 250px; /* 设置悬浮框的宽度 */
  height: 100%; /* 设置悬浮框的高度 */
  z-index: 1000; /* 设置悬浮框的层级 */
}

.right-floating-box {
  position: absolute;
  top: 50%;
  right: 200px;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  width: 250px; /* 设置悬浮框的宽度 */
  height: 750px; /* 设置悬浮框的高度 */
  z-index: 1000; /* 设置悬浮框的层级 */
}

.title {
  /* 如果需要，可以在这里调整标题的样式，比如字体大小、行高等 */
  font-size: 20px;
  font-weight: bold;
  /* 设置右边距为0 */
  margin-right: 0;
}

/* ... 其他样式 ... */
.page-container {
  padding: 0;
  box-sizing: border-box;
}


.button-row {
  margin-top: 0; /* 确保没有额外的上边距 */
}

.top-button-row .el-button {
  margin-left: 10px; /* 按钮之间的间距 */
}

.page-container {
  padding: 0;
  margin: 0;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f5f5f5;
}


.button-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* 或者使用 margin-bottom 在每个按钮上 */
}

.map-and-search-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.search_box {
  margin-bottom: 10px;
}

.label {
  margin-bottom: 5px;
}
#gaode_Map {
  margin: 0 auto; /* 居中显示 */
}

.top-section {
  display: flex; /* 使用flex布局使元素并排显示 */
  align-items: center; /* 垂直居中 */
}

.title {
  font-weight: bold; /* 加粗标题 */
  font-size: 18px; /* 增大字体大小 */
  margin-right: 20px; /* 与右侧按钮保持间距 */
}

.button-margin {
  margin-left: 10px; /* 按钮之间的间距，第一个按钮前不需要，所以不在此处设置 */
}


/* 高德地图风格的全屏按钮样式 */
#fullscreenBtn {
  background-color: #1791fc; /* 高德地图常用的蓝色 */
  border: none; /* 移除边框 */
  color: white; /* 白色文字 */
  padding: 8px 16px; /* 适当的内边距 */
  text-align: center; /* 文字居中 */
  font-size: 14px; /* 字体大小，高德地图的按钮文字通常较小 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  border-radius: 4px; /* 圆角，高德地图的按钮圆角通常较小 */
  transition: background-color 0.3s, transform 0.3s; /* 平滑过渡效果，包括背景色和可能的变换（如缩放） */
  outline: none; /* 移除点击时的轮廓线 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加一些阴影效果，增强立体感 */
  /* 可选：添加图标，这里用伪元素模拟一个简单的图标 */
  position: relative;
  padding-left: 30px; /* 为图标留出空间 */
}


/* 鼠标悬停时的样式变化 */
#fullscreenBtn:hover {
  background-color: #007bff; /* 稍微深一点的蓝色 */
  transform: scale(1.05); /* 轻微放大效果，增强点击反馈 */
}

.search_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;

  .label {
    color: #000;
    width: 100px;
  }
}

.content {
  position: relative;
}

#panel {
  position: absolute;
  top: 50px;
  right: 20px;
}


.amap-sug-result {
  z-index: 2999 !important;
}
</style>



